<template>
	<div class="result-wp" :style="outerWpStyle">
		<div class="r-inner-wp" :style="styleObj">
			<div class="tip-wp">
				<div class="all-right" v-if="rightNum>=10">全答对了，您好棒</div>
				<div class="has-wrong" v-if="rightNum<10">
					<p>您本次一共答对{{rightNum}}题，</p>
					<p>继续加油呦！</p>
				</div>
			</div>
			<div class="ans-again btn" @click="ansAgain()" v-if="rightNum<10">重新答题</div>
			<div class="winner-tip" v-if="rightNum>=10">
				<p>关注更多答题详情，</p>
				<p>请大家关注微信公众号：莱芒，</p>
				<p>更多机会<span class="hight-light-words">赢取千元大奖</span></p>
			</div>
		</div>
	</div>
</template>
<script>	
	export default {
		data() {
			return {
				rightNum:0,
				allRightPic:require('../assets/img/all-right.png'),
				hasWrongPic:require('../assets/img/has-wrong.png'),
				outerWpStyle:{'height':'100%'}
			}
		},
		methods:{
			ansAgain() {
				this.$router.replace('/question');
			},
			comOuterWpStyle() {
				var w = document.documentElement.clientWidth;
				var h = 1.8*w + 'px';
				this.outerWpStyle.height = h;
			}
		},
		created() {
			let vm = this;
			vm.rightNum = vm.$route.params.correctNum;
			vm.comOuterWpStyle();
		},
		computed:{
			picUrl() {
				let vm = this;
				return vm.rightNum>=10?vm.allRightPic:vm.hasWrongPic;
			},
			styleObj() {
				var vm = this;
				return {
					backgroundImage:"url("+vm.picUrl+")"
				}
			}
		
		}
	}
	
</script>

<style>
	.result-wp {
		background: url('../assets/img/answer-bg.png') no-repeat;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-size: 100% 100%;
	}
	.r-inner-wp {
		width: 300px;
		height: 395px;
		border: 2px solid #ea5803;
		border-radius: 5px;
		margin: 89px auto 0;
		background-size: 100% 100%;
	}
	.all-right {
		margin-top: 50px;
		text-align: center;
		font-size: 19px;
		color: #333;
	}
	.winner-tip {
		margin-top: 215px;
		color: #333;
		font-size: 15px;
		text-align: center;
		line-height: 25px;
	}
	.winner-tip .hight-light-words {
		color: #ea5803;
	}
	.has-wrong {
		font-size: 19px;
		color: #333;
		text-align: center;
		margin-top: 47px;
	}
	.has-wrong p {
		line-height: 43px;
	}
	.ans-again {
		width: 300px;
		height: 50px;
		line-height: 50px;
		color: #fff;
		font-weight: bold;
		text-align: center;
		font-size: 19px;
		background-color: #25a04f;
		border-radius: 5px;
		margin-top: 295px;
		user-select: none;
		-webkit-user-select:none;
	}
	
</style>